<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>InputManager 演示</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }
        
        h1 {
            color: #333;
            margin-bottom: 20px;
        }
        
        .instructions {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .controls {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }
        
        .control-group {
            text-align: left;
        }
        
        .control-group h3 {
            color: #555;
            margin-bottom: 10px;
        }
        
        .control-group ul {
            list-style-type: none;
            padding: 0;
        }
        
        .control-group li {
            padding: 5px 0;
            color: #666;
        }
        
        canvas {
            border: 2px solid #333;
            border-radius: 8px;
            background: linear-gradient(to bottom, #87CEEB 0%, #87CEEB 70%, #90EE90 70%, #90EE90 100%);
            display: block;
            margin: 0 auto;
            touch-action: none; /* 防止触摸时的默认行为 */
        }
        
        .buttons {
            margin-top: 20px;
        }
        
        button {
            padding: 10px 20px;
            margin: 0 10px;
            border: none;
            border-radius: 5px;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            font-size: 16px;
        }
        
        button:hover {
            background-color: #45a049;
        }
        
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        
        .status {
            margin-top: 20px;
            padding: 10px;
            background: white;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>InputManager 输入控制演示</h1>
        
        <div class="instructions">
            <p>这个演示展示了InputManager类如何处理键盘和触摸输入。控制绿色方块进行跳跃、滑铲和移动！</p>
            
            <div class="controls">
                <div class="control-group">
                    <h3>🎮 键盘控制</h3>
                    <ul>
                        <li>空格键 / W键 / ↑ - 跳跃</li>
                        <li>S键 / ↓ - 滑铲</li>
                        <li>A键 / ← - 左移</li>
                        <li>D键 / → - 右移</li>
                        <li>P键 / ESC - 暂停/恢复</li>
                    </ul>
                </div>
                
                <div class="control-group">
                    <h3>👆 触摸控制</h3>
                    <ul>
                        <li>点击 - 跳跃</li>
                        <li>向上滑动 - 跳跃</li>
                        <li>向下滑动 - 滑铲</li>
                        <li>向左滑动 - 左移</li>
                        <li>向右滑动 - 右移</li>
                        <li>长按 - 暂停/恢复</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <canvas id="demo-canvas" width="800" height="400"></canvas>
        
        <div class="buttons">
            <button id="start-btn">开始演示</button>
            <button id="stop-btn" disabled>停止演示</button>
        </div>
        
        <div class="status">
            <p><strong>状态:</strong> <span id="status">未开始</span></p>
            <p><strong>提示:</strong> 点击Canvas区域以确保键盘输入能够被捕获</p>
        </div>
    </div>

    <script type="module">
        // 注意：在实际项目中，这些类应该从编译后的JS文件中导入
        // 这里为了演示目的，我们将创建一个简化版本
        
        class SimpleInputDemo {
            constructor(canvasId) {
                this.canvas = document.getElementById(canvasId);
                this.ctx = this.canvas.getContext('2d');
                this.isRunning = false;
                this.playerX = 400;
                this.playerY = 300;
                this.playerSize = 50;
                this.isJumping = false;
                this.isSliding = false;
                this.jumpVelocity = 0;
                this.gravity = 0.8;
                this.groundY = 300;
                this.animationId = null;
                
                this.setupEventListeners();
            }
            
            setupEventListeners() {
                // 键盘事件
                this.canvas.addEventListener('keydown', (e) => {
                    if (!this.isRunning) return;
                    
                    switch(e.code) {
                        case 'Space':
                        case 'KeyW':
                        case 'ArrowUp':
                            e.preventDefault();
                            this.jump();
                            this.updateStatus('跳跃！');
                            break;
                        case 'KeyS':
                        case 'ArrowDown':
                            e.preventDefault();
                            this.slide();
                            this.updateStatus('滑铲！');
                            break;
                        case 'KeyA':
                        case 'ArrowLeft':
                            e.preventDefault();
                            this.moveLeft();
                            this.updateStatus('左移！');
                            break;
                        case 'KeyD':
                        case 'ArrowRight':
                            e.preventDefault();
                            this.moveRight();
                            this.updateStatus('右移！');
                            break;
                        case 'KeyP':
                        case 'Escape':
                            e.preventDefault();
                            this.togglePause();
                            break;
                    }
                });
                
                // 触摸事件
                let touchStart = null;
                let touchStartTime = 0;
                let holdTimer = null;
                
                this.canvas.addEventListener('touchstart', (e) => {
                    if (!this.isRunning) return;
                    e.preventDefault();
                    
                    const touch = e.touches[0];
                    touchStart = { x: touch.clientX, y: touch.clientY };
                    touchStartTime = Date.now();
                    
                    // 设置长按检测
                    holdTimer = setTimeout(() => {
                        this.togglePause();
                        this.updateStatus('长按暂停！');
                    }, 500);
                });
                
                this.canvas.addEventListener('touchend', (e) => {
                    if (!this.isRunning || !touchStart) return;
                    e.preventDefault();
                    
                    clearTimeout(holdTimer);
                    
                    const touch = e.changedTouches[0];
                    const deltaX = touch.clientX - touchStart.x;
                    const deltaY = touch.clientY - touchStart.y;
                    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
                    const duration = Date.now() - touchStartTime;
                    
                    if (distance < 30 && duration < 200) {
                        // 点击
                        this.jump();
                        this.updateStatus('点击跳跃！');
                    } else if (distance >= 30) {
                        // 滑动
                        if (Math.abs(deltaX) > Math.abs(deltaY)) {
                            // 水平滑动
                            if (deltaX > 0) {
                                this.moveRight();
                                this.updateStatus('向右滑动！');
                            } else {
                                this.moveLeft();
                                this.updateStatus('向左滑动！');
                            }
                        } else {
                            // 垂直滑动
                            if (deltaY > 0) {
                                this.slide();
                                this.updateStatus('向下滑动滑铲！');
                            } else {
                                this.jump();
                                this.updateStatus('向上滑动跳跃！');
                            }
                        }
                    }
                    
                    touchStart = null;
                });
                
                // 确保Canvas可以接收焦点
                this.canvas.tabIndex = 0;
            }
            
            jump() {
                if (!this.isJumping && !this.isSliding) {
                    this.isJumping = true;
                    this.jumpVelocity = -15;
                }
            }
            
            slide() {
                if (!this.isSliding && !this.isJumping) {
                    this.isSliding = true;
                    setTimeout(() => {
                        this.isSliding = false;
                    }, 500);
                }
            }
            
            moveLeft() {
                this.playerX = Math.max(25, this.playerX - 50);
            }
            
            moveRight() {
                this.playerX = Math.min(775, this.playerX + 50);
            }
            
            togglePause() {
                if (this.animationId) {
                    cancelAnimationFrame(this.animationId);
                    this.animationId = null;
                    this.updateStatus('游戏暂停');
                } else {
                    this.gameLoop();
                    this.updateStatus('游戏恢复');
                }
            }
            
            start() {
                this.isRunning = true;
                this.gameLoop();
                this.updateStatus('游戏运行中 - 点击Canvas区域开始控制！');
                this.canvas.focus();
            }
            
            stop() {
                this.isRunning = false;
                if (this.animationId) {
                    cancelAnimationFrame(this.animationId);
                    this.animationId = null;
                }
                this.updateStatus('游戏已停止');
            }
            
            gameLoop() {
                if (!this.isRunning) return;
                
                this.update();
                this.render();
                this.animationId = requestAnimationFrame(() => this.gameLoop());
            }
            
            update() {
                if (this.isJumping) {
                    this.playerY += this.jumpVelocity;
                    this.jumpVelocity += this.gravity;
                    
                    if (this.playerY >= this.groundY) {
                        this.playerY = this.groundY;
                        this.isJumping = false;
                        this.jumpVelocity = 0;
                    }
                }
            }
            
            render() {
                // 清空画布
                this.ctx.clearRect(0, 0, 800, 400);
                
                // 绘制地面
                this.ctx.fillStyle = '#8B4513';
                this.ctx.fillRect(0, this.groundY + this.playerSize, 800, 400 - this.groundY - this.playerSize);
                
                // 绘制玩家
                const playerHeight = this.isSliding ? this.playerSize * 0.5 : this.playerSize;
                const playerY = this.isSliding ? this.playerY + this.playerSize * 0.5 : this.playerY;
                
                if (this.isJumping) {
                    this.ctx.fillStyle = '#2196F3'; // 蓝色（跳跃）
                } else if (this.isSliding) {
                    this.ctx.fillStyle = '#FF9800'; // 橙色（滑铲）
                } else {
                    this.ctx.fillStyle = '#4CAF50'; // 绿色（跑步）
                }
                
                this.ctx.fillRect(
                    this.playerX - this.playerSize / 2,
                    playerY,
                    this.playerSize,
                    playerHeight
                );
                
                // 绘制状态文本
                let status = '跑步';
                if (this.isJumping) status = '跳跃';
                else if (this.isSliding) status = '滑铲';
                
                this.ctx.fillStyle = '#000000';
                this.ctx.font = '20px Arial';
                this.ctx.fillText(`当前状态: ${status}`, 20, 40);
            }
            
            updateStatus(message) {
                document.getElementById('status').textContent = message;
            }
        }
        
        // 初始化演示
        const demo = new SimpleInputDemo('demo-canvas');
        
        document.getElementById('start-btn').addEventListener('click', () => {
            demo.start();
            document.getElementById('start-btn').disabled = true;
            document.getElementById('stop-btn').disabled = false;
        });
        
        document.getElementById('stop-btn').addEventListener('click', () => {
            demo.stop();
            document.getElementById('start-btn').disabled = false;
            document.getElementById('stop-btn').disabled = true;
        });
    </script>
</body>
</html>